<!DOCTYPE html>
<html>
    <head>
        <!-- <link rel="styleSheet" href="./test.css" type="text/css"/> -->
        <style>
            .heart {
                position: absolute;
                margin: auto;
                width: 50px;
                height: 50px;
                background-color: pink;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                transform: rotate(-45deg);
                animation-name: heartbeat;
                animation-duration: 1s;
                animation-iteration-count: infinite;
            }

            body {
                animation-name: bg;
                animation-duration: 1s;
                animation-iteration-count: infinite;
            }

            @keyframes heartbeat {
                0% {
                    transform: scale(1) rotate(-45deg);
                }
                50% {
                    transform: scale(0.5) rotate(-45deg);
                }
            }

            @keyframes bg {
                50% {
                    background-color: #ffe6f2;
                } 
            }

            .heart::before {
                content: "";
                position: absolute;
                margin: auto;
                width: 50px;
                height: 50px;
                bottom: 25px;
                background-color: pink;
                border-radius: 50%;
            }
            .heart::after {
                content: "";
                position: absolute;
                margin: auto;
                width: 50px;
                height: 50px;
                left: 25px;
                background-color: pink;
                border-radius: 50%;
            }
            
        </style>
    </head>
    <body>
      <div class="heart"></div>
    </body>
</html>